/**
 * CtoDrawer用户需知组件
 * @param {*} options 
 *              - domId 绑定的domId
 *              - borderColor CheckBox的边框颜色
 *              - iconColor CheckBox的边框颜色
 *              - fontColor 勾选代表同意字体颜色
 *              - contractColor 用户需知字体颜色
 *              - onCheckboxClick CheckBox点击回调事件
 * @template
 */
let CtoDrawer = function (options) {
    const vm = this;

    vm.id = options.id || 'CtoDrawer';
    vm.width = options.width || '30%';
    vm.visible = options.visible || false;
    vm.showClose = options.showClose || false;
    vm.content = options.content;
    vm.beforeClose = options.beforeClose;

    vm.drawerMask = null;
    vm.drawer = null;
    vm.closeEle = null;
}

/**
 * CtoDrawer的原型方法
 */
CtoDrawer.prototype = {
    show () {
        const vm = this;

        vm.visible = true;
        let bodyEle = document.body;
        vm.drawerMask = document.querySelector('.cto-drawer-mask');
        vm.drawer = document.querySelector('.cto-drawer');
        vm.closeEle = document.querySelector('.cto-drawer .drawer-close');

        if (vm.drawerMask) {
            if (vm.id === vm.drawer.id) {
                // 同一drawer，复用直接显示drawer
                vm.drawerMask.style.visibility = 'visible';
                vm.showDrawerAnimated();
                return;
            }

            // 清除现有drawer
            bodyEle.removeChild(vm.drawerMask);
            bodyEle.removeChild(vm.drawer);
        }

        // 不存在，创建drawer容器并初始化内容
        vm.drawerMask = document.createElement('div');
        vm.drawerMask.id = vm.id + 'Wrap';
        vm.drawerMask.classList.add('cto-drawer-mask');
        bodyEle.appendChild(vm.drawerMask);

        // drawer主体
        vm.drawer = document.createElement('div');
        vm.drawer.id = vm.id;
        vm.drawer.classList.add('cto-drawer');
        bodyEle.appendChild(vm.drawer);

        vm.initContent();
        vm.showDrawerAnimated();
    },

    initContent () {
        const vm = this;

        // esc关闭
        document.addEventListener('keydown',function (e) {
            if (e.code == 'Escape' || e.which == 27) {
                vm.hide();
                vm.beforeClose && vm.beforeClose('esc');
            }
        },false);

        // model遮罩点击关闭
        vm.drawerMask.onclick = function () {
            vm.hide();
            vm.beforeClose && vm.beforeClose('model');
        }

        // 初始化样式，先置空原有内容
        vm.drawer.innerHTML = '';
        // vm.drawer.style.width = vm.width;

        // 关闭按钮
        if (vm.showClose) {
            vm.closeEle = document.createElement('div');
            vm.closeEle.classList.add('drawer-close');
            vm.drawer.appendChild(vm.closeEle);

            // 关闭按钮点击关闭
            vm.closeEle.onclick = function () {
                vm.hide();
                vm.beforeClose && vm.beforeClose('close');
            }
        }

        // 主体
        if (vm.content) {
            let contentEle = document.createElement('div');
            contentEle.classList.add('cto-drawer-body');
            vm.drawer.appendChild(contentEle);

            if (vm.content instanceof Element) {
                // 传入的是dom
                contentEle.appendChild(vm.content);
            } else {
                // 字符串形式，可以是html字符串
                contentEle.innerHTML = vm.content;
            }
        }
    },

    showDrawerAnimated () {
        const vm = this;

        // 显示drawer
        vm.drawerMask.style.visibility = 'visible';
        setTimeout(function () {
            vm.drawer.classList.add('enter');
            vm.drawer.classList.remove('leave');
            vm.closeEle.style.visibility = 'visible';
            vm.drawerMask.style.opacity = 1;
            vm.drawer.style.width = vm.width;
            vm.drawer.style.visibility = 'visible';
        },100);
    },


    hide () {
        const vm = this;

        vm.visible = false;
        // 隐藏drawer
        vm.closeEle.style.visibility = 'hidden';
        setTimeout(function () {
            vm.drawer.classList.add('leave');
            vm.drawer.classList.remove('enter');
            vm.drawerMask.style.visibility = 'hidden';
            vm.drawerMask.style.opacity = 0;
            setTimeout(function () {
                vm.drawer.style.visibility = 'hidden';
            },590);
        },100);
    }
}

/**
 * 获取指定id的dom对象
 * @param {String} id 
 * @returns 指定id的dom对象
 */
function $id (id) {
    return id ? document.getElementById(id) : null;
};

/**
 * 在目标元素后插入新元素
 * @param {Element} newElement 要插入的新元素
 * @param {Element} targetElement 目标元素
 */
function insertAfter (newElement,targetElement) {
    let parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}